<script setup lang="ts">
import { useChannelStore } from '@/stores/channel'
import type { ArticleItem, ArticleResData } from '@/types/data'
import axios from 'axios'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const articles = ref<ArticleItem[]>([])
const store = useChannelStore()

watch(
  () => store.channel,
  async () => {
    const res = await axios.get<ArticleResData>(`http://geek.itheima.net/v1_0/articles`, {
      params: {
        // 频道id
        channel_id: store.channel,
        // 时间戳 1970.1.1
        timestamp: Date.now(),
      },
    })
    // console.log(res.data)
    articles.value = res.data.data.results
  },
  {
    immediate: true,
  },
)
const router = useRouter()
const toDeatils = (id: string) => {
  // path+query
  // router.push({
  //   path: '/detail',
  //   query: { id: id },
  // })

  // name+params
  router.push({
    name: 'detail',
    params: { id: id },
  })

  alert('点击了')
}
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">
        {{ item.title }} <button @click="toDeatils(item.art_id)">查看详情</button>
      </p>

      <!-- template 解析完毕后不会出现，但是可以写指令 -->
      <img v-for="(src, i) in item.cover.images" :key="i" class="img" :src="src" alt="" />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
